import { useState } from 'react'
import { Card, Table, Button, Input, Select, DatePicker, Space, Tag, message, Avatar, Progress, Tooltip } from 'antd'
import { DownloadOutlined, SearchOutlined, ReloadOutlined, UserOutlined, BookOutlined, ClockCircleOutlined, FireOutlined, TrophyOutlined, RiseOutlined } from '@ant-design/icons'
import './index.scss'

const { RangePicker } = DatePicker

const ReadingProgress = () => {
  const [loading, setLoading] = useState(false)
  const [selectedRowKeys, setSelectedRowKeys] = useState([])
  
  // 搜索表单状态
  const [searchForm, setSearchForm] = useState({
    userId: '',
    bookName: '',
    progressRange: 'all',
    updateTime: null
  })

  // 模拟数据
  const mockData = [
    {
      key: '1',
      progressId: 20001,
      userId: 1001,
      username: '张三',
      bookId: 2001,
      bookName: '三体：地球往事',
      bookCover: 'https://img1.doubanio.com/view/subject/s/public/s2768378.jpg',
      category: '科幻小说',
      totalChapters: 50,
      currentChapter: 42,
      progress: 84,
      readingSpeed: 12.5,
      estimatedTime: 64,
      lastReadChapter: '第42章：黑暗森林',
      lastReadTime: '2024-10-21 14:30',
      readingDays: 15,
      status: '正常'
    },
    {
      key: '2',
      progressId: 20002,
      userId: 1002,
      username: '李四',
      bookId: 2002,
      bookName: '活着',
      bookCover: 'https://img2.doubanio.com/view/subject/s/public/s27061786.jpg',
      category: '文学小说',
      totalChapters: 30,
      currentChapter: 30,
      progress: 100,
      readingSpeed: 15.2,
      estimatedTime: 0,
      lastReadChapter: '尾声',
      lastReadTime: '2024-10-20 20:15',
      readingDays: 8,
      status: '已完成'
    },
    {
      key: '3',
      progressId: 20003,
      userId: 1003,
      username: '王五',
      bookId: 2003,
      bookName: '百年孤独',
      bookCover: 'https://img1.doubanio.com/view/subject/s/public/s6384944.jpg',
      category: '文学小说',
      totalChapters: 40,
      currentChapter: 18,
      progress: 45,
      readingSpeed: 8.3,
      estimatedTime: 165,
      lastReadChapter: '第18章',
      lastReadTime: '2024-10-19 16:45',
      readingDays: 22,
      status: '正常'
    },
    {
      key: '4',
      progressId: 20004,
      userId: 1004,
      username: '赵六',
      bookId: 2004,
      bookName: '人类简史',
      bookCover: 'https://img2.doubanio.com/view/subject/s/public/s28003154.jpg',
      category: '历史人文',
      totalChapters: 25,
      currentChapter: 8,
      progress: 32,
      readingSpeed: 5.8,
      estimatedTime: 195,
      lastReadChapter: '第8章：历史的方向',
      lastReadTime: '2024-10-10 11:20',
      readingDays: 35,
      status: '缓慢'
    },
    {
      key: '5',
      progressId: 20005,
      userId: 1005,
      username: '孙七',
      bookId: 2005,
      bookName: '平凡的世界',
      bookCover: 'https://img1.doubanio.com/view/subject/s/public/s1144911.jpg',
      category: '文学小说',
      totalChapters: 60,
      currentChapter: 41,
      progress: 68,
      readingSpeed: 10.5,
      estimatedTime: 108,
      lastReadChapter: '第41章',
      lastReadTime: '2024-10-21 18:00',
      readingDays: 18,
      status: '正常'
    }
  ]

  // 表格列配置
  const columns = [
    {
      title: '进度ID',
      dataIndex: 'progressId',
      key: 'progressId',
      width: 100,
      align: 'center'
    },
    {
      title: '读者信息',
      key: 'userInfo',
      width: 180,
      render: (_, record) => (
        <div className="user-info-cell">
          <Avatar icon={<UserOutlined />} size={40} />
          <div className="user-details">
            <div className="username">{record.username}</div>
            <div className="user-id">ID: {record.userId}</div>
          </div>
        </div>
      )
    },
    {
      title: '图书信息',
      key: 'bookInfo',
      width: 220,
      render: (_, record) => (
        <div className="book-info-cell">
          <div className="book-cover">
            <img src={record.bookCover} alt={record.bookName} />
          </div>
          <div className="book-details">
            <div className="book-name">{record.bookName}</div>
            <Tag color="blue" size="small">{record.category}</Tag>
          </div>
        </div>
      )
    },
    {
      title: '阅读进度',
      key: 'progress',
      width: 200,
      render: (_, record) => (
        <div className="progress-detail">
          <Progress 
            percent={record.progress} 
            size="small"
            strokeColor={{
              '0%': '#108ee9',
              '100%': '#87d068',
            }}
          />
          <div className="chapter-info">
            {record.currentChapter}/{record.totalChapters} 章
          </div>
        </div>
      )
    },
    {
      title: '最后阅读',
      key: 'lastRead',
      width: 200,
      render: (_, record) => (
        <div className="last-read-cell">
          <div className="chapter-name">{record.lastReadChapter}</div>
          <div className="read-time">{record.lastReadTime}</div>
        </div>
      )
    },
    {
      title: '阅读速度',
      dataIndex: 'readingSpeed',
      key: 'readingSpeed',
      width: 120,
      align: 'center',
      render: (speed) => (
        <Tooltip title="分钟/章">
          <span className="reading-speed">{speed} min/章</span>
        </Tooltip>
      )
    },
    {
      title: '预计剩余',
      dataIndex: 'estimatedTime',
      key: 'estimatedTime',
      width: 120,
      align: 'center',
      render: (time) => (
        <span className="estimated-time">
          {time > 0 ? `${time} 分钟` : '已完成'}
        </span>
      )
    },
    {
      title: '阅读天数',
      dataIndex: 'readingDays',
      key: 'readingDays',
      width: 100,
      align: 'center',
      render: (days) => (
        <span className="reading-days">{days} 天</span>
      )
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      width: 100,
      render: (text) => {
        const colorMap = {
          '正常': 'success',
          '已完成': 'blue',
          '缓慢': 'warning'
        }
        return <Tag color={colorMap[text]}>{text}</Tag>
      }
    },
    {
      title: '操作',
      key: 'action',
      width: 120,
      fixed: 'right',
      render: (_, record) => (
        <Space size="small">
          <Button type="link" size="small">详情</Button>
        </Space>
      )
    }
  ]

  // 搜索
  const handleSearch = () => {
    setLoading(true)
    setTimeout(() => {
      message.success('搜索成功')
      setLoading(false)
    }, 500)
  }

  // 重置
  const handleReset = () => {
    setSearchForm({
      userId: '',
      bookName: '',
      progressRange: 'all',
      updateTime: null
    })
    message.info('已重置搜索条件')
  }

  // 下载
  const handleDownload = () => {
    message.success('开始导出数据')
  }

  // 行选择
  const rowSelection = {
    selectedRowKeys,
    onChange: (selectedKeys) => {
      setSelectedRowKeys(selectedKeys)
    }
  }

  return (
    <div className="reading-progress-container">
      {/* 搜索表格 */}
      <Card className="search-card" title="查询表格">
        <div className="search-form">
          <div className="form-row">
            <div className="form-item">
              <label>读者ID</label>
              <Input
                placeholder="请输入读者ID"
                value={searchForm.userId}
                onChange={(e) => setSearchForm({ ...searchForm, userId: e.target.value })}
              />
            </div>
            <div className="form-item">
              <label>进度范围</label>
              <Select
                value={searchForm.progressRange}
                onChange={(value) => setSearchForm({ ...searchForm, progressRange: value })}
              >
                <Select.Option value="all">全部</Select.Option>
                <Select.Option value="0-30">0-30%</Select.Option>
                <Select.Option value="30-60">30-60%</Select.Option>
                <Select.Option value="60-100">60-100%</Select.Option>
                <Select.Option value="100">已完成</Select.Option>
              </Select>
            </div>
          </div>

          <div className="form-row">
            <div className="form-item">
              <label>图书名称</label>
              <Input
                placeholder="请输入图书名称"
                value={searchForm.bookName}
                onChange={(e) => setSearchForm({ ...searchForm, bookName: e.target.value })}
              />
            </div>
            <div className="form-item">
              <label>更新时间</label>
              <RangePicker
                value={searchForm.updateTime}
                onChange={(dates) => setSearchForm({ ...searchForm, updateTime: dates })}
                placeholder={['开始日期', '结束日期']}
              />
            </div>
            <div className="form-item form-actions">
              <Button type="primary" icon={<SearchOutlined />} onClick={handleSearch}>
                查询
              </Button>
              <Button icon={<ReloadOutlined />} onClick={handleReset}>
                重置
              </Button>
            </div>
          </div>
        </div>
      </Card>

      {/* 统计卡片 */}
      <div className="stats-cards">
        <Card className="stat-card">
          <div className="stat-content">
            <div className="stat-info">
              <div className="stat-label">总进度记录</div>
              <div className="stat-value">3,256</div>
            </div>
            <div className="stat-icon reading">
              <BookOutlined />
            </div>
          </div>
        </Card>
        <Card className="stat-card">
          <div className="stat-content">
            <div className="stat-info">
              <div className="stat-label">进行中</div>
              <div className="stat-value">2,145</div>
            </div>
            <div className="stat-icon processing">
              <ClockCircleOutlined />
            </div>
          </div>
        </Card>
        <Card className="stat-card">
          <div className="stat-content">
            <div className="stat-info">
              <div className="stat-label">活跃读者</div>
              <div className="stat-value">1,856</div>
            </div>
            <div className="stat-icon active">
              <FireOutlined />
            </div>
          </div>
        </Card>
        <Card className="stat-card">
          <div className="stat-content">
            <div className="stat-info">
              <div className="stat-label">平均进度</div>
              <div className="stat-value">62.3%</div>
            </div>
            <div className="stat-icon average">
              <RiseOutlined />
            </div>
          </div>
        </Card>
      </div>

      {/* 操作按钮和表格 */}
      <Card className="table-card">
        <div className="table-toolbar">
          <div className="toolbar-title">阅读进度列表</div>
          <Button icon={<DownloadOutlined />} onClick={handleDownload}>
            导出数据
          </Button>
        </div>

        <Table
          rowSelection={rowSelection}
          columns={columns}
          dataSource={mockData}
          loading={loading}
          pagination={{
            total: 3256,
            current: 1,
            pageSize: 50,
            showSizeChanger: true,
            showQuickJumper: true,
            showTotal: (total) => `共 ${total} 条`,
            pageSizeOptions: ['10', '20', '50', '100']
          }}
          scroll={{ x: 1500 }}
        />
      </Card>
    </div>
  )
}

export default ReadingProgress
